
import React, { Component } from 'react'
// import jsonToJson from '../../util/jsonToJson'
import fetchjsonp from "fetch-jsonp"
import { NavBar, Icon, Tabs } from "antd-mobile"
import IndexGoblack from "../../assets/images/index-goback.png"
import "./NavListDetails.scss"
import indexSearch1 from "../../assets/images/index-search1.png"
import { withRouter } from 'react-router-dom'
class NavListDetails extends Component {
    constructor(props){
        super(props)
        // console.log(props)
        this.NavListRef = React.createRef()
    }
    state = {
        tabs: [
            { title: "综合" },
            { title: "销量" },
            { title: "新品" },
            { title: "价格" },
        ],
        navListDetailsZH: [],
        navListDetailsXL: [],
        navListDetailsXP: [],
        navListDetailsJG: [],
        name:["女装","母婴","上衣","女鞋","裤子","美妆","裙子","内衣","套装","配饰","小众","包包","家居","男装"],
        title:"",
        scrollTop:0,
        min:"",
        max:""
    }



    componentDidMount() {
        let id = parseInt(this.props.match.params.id)
        // console.log(this.state.name[(id-1)])
        this.setState({
            title:this.state.name[(id-1)]
        })
        fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name[(id-1)] + "&minPrice=&maxPrice=&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
            // console.log(res.json())
        return res.json()
        }).then(val=>{
            // console.log(val.result.wall.docs)
             this.setState({
                navListDetailsZH: val.result.wall.docs
            })
        })
        fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name[(id-1)] + "&minPrice=&maxPrice=&ppath=&cpc_offset=0&ptp=32.rPCjb.0.0.6Cz33xU2&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600776440265").then(res => {
            // console.log(res.json())
        return res.json()
        }).then(val=>{
            // console.log(val.result.wall.docs)
             this.setState({
                navListDetailsXL: val.result.wall.docs
            })
        })
        fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name[(id-1)] + "&minPrice=&maxPrice=&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
            // console.log(res.json())
        return res.json()
        }).then(val=>{
            // console.log(val.result.wall.docs)
             this.setState({
                navListDetailsXP: val.result.wall.docs
            })
        })
        fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.name[(id-1)] + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
            // console.log(res.json())
        return res.json()
        }).then(val=>{
            // console.log(val.result.wall.docs)
             this.setState({
                navListDetailsJG: val.result.wall.docs
            })
        })

        window.addEventListener('scroll',()=>{
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            
            this.setState({
                scrollTop
            })

        })
       
    }
    // 返回顶部
    goToTop=(e) => {
        document.documentElement.scrollTop=0
        this.setState({
            scrollTop:0,
        })
        
    }
    

    // 去搜索中心
    GOTOSearch =(params) => {
        this.props.history.push("../search")
    }
    mins = (params) => {
        this.setState({
            min: 30,
            max: 50
        })
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.title + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({ navListDetailsJG: val.result.wall.docs, })
            })
        }, 0)
    }
    mens = (params) => {
        this.setState({
            min: 50,
            max: 80 
            
        })
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.title + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({ navListDetailsJG: val.result.wall.docs, })
            })
        }, 0)
    }
    maxs = (params) => {
        this.setState({
            min: 80,
            max: 100
        })
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.title + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({ navListDetailsJG: val.result.wall.docs, })
            })
        }, 0)
    }
    nise=(e) => {
        
        setTimeout(() => {
            fetchjsonp("https://list.mogu.com/search?_version=8253&ratio=3%3A4&cKey=46&sort=sell&page=1&q=" + this.state.title + "&minPrice=" + this.state.min + "&maxPrice=" + this.state.max + "&ppath=&cpc_offset=0&ptp=32._mf1_1239_4537.0.0.UwYuAL1Q&acm=3.mf.1_0_0.0.0.0.mf_4537_1211935-idx_0-mfs_12-dm1_5000&offset=&_=1600432244687").then(res => {
                return res.json()
            }).then(val => {
                this.setState({ navListDetailsJG: val.result.wall.docs, })
            })
        }, 0)
    }
    laier1=(e) => {
        this.setState({
            min:e.target.value
        })
    }
    
    laier2=(e) => {
        this.setState({
            max:e.target.value
        })
        
    }
    historyGo=(e) => {
        window.history.go(0)
    }
    goTodetails=(e) => {
        // console.log(e.target.getAttribute("data-index"))
        // let id=e.target.getAttribute("data-index")
        // console.log(this.props)
        this.props.history.push("../details/" + "1msvj44")
    }
    
    
    render() {
        return (
            <div className="mgNavListDetails">
                <div className="navListDetailsTop">
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.history.go(-1)}
                        rightContent={<i className='iconfont icon-shangcheng2' style={{ color: '#a7a7a7', fontSize: '0.666667rem' }}></i>}
                    >
                        <div className="DetailsTopInp">
                            <i className="iconfont icon-fangdajing"></i>
                            <input type="text" className="DetailsTopSearch" placeholder={this.state.title} onClick={this.GOTOSearch}></input>
                            <img src={IndexGoblack} alt="" onClick={this.historyGo}></img>

                        </div>
                    </NavBar>
                </div>
                <div className="mgNavListDetailsTab">
                    <Tabs tabs={this.state.tabs}
                    animated={false}
                        initialPage={0}
                        // onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        // onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                        // tabBarUnderlineStyle={{ border: 0 }}
                    >
                        <div className="NavListDetailsTabSynt">
                        {this.state.navListDetailsZH.map((v) => {
                                        return <div className="DetailsTabSyntList" key={v.tradeItemId}>
                                            <div className="SyntListTop">
                                                <img src={v.img} className="SyntListTopimg" alt='' onClick={this.goTodetails} data-index={v.tradeItemId}></img>
                                                <img src={indexSearch1} alt="" className="SyntListTopimg2" ></img>
                                            </div>
                                            <p className="SyntListTit">
                                                {v.title}
                                            </p>
                                            <div className="SyntListBottom">
                                                <span className="SyntListBottomPic">¥{v.price}</span>
                                                <span className="SyntListBottomvolume">{v.cfav}</span>

                                            </div>
                                        </div>
                                })
                            }
                        </div>
                        <div className="NavListDetailsTabSynt">
                        {this.state.navListDetailsXL.map((v) => {
                                        return <div className="DetailsTabSyntList" key={v.tradeItemId}>
                                            <div className="SyntListTop">
                                                <img src={v.img} className="SyntListTopimg" alt='' onClick={this.goTodetails}></img>
                                                <img src={indexSearch1} alt="" className="SyntListTopimg2"></img>
                                            </div>
                                            <p className="SyntListTit">
                                                {v.title}
                                            </p>
                                            <div className="SyntListBottom">
                                                <span className="SyntListBottomPic">¥{v.price}</span>
                                                <span className="SyntListBottomvolume">{v.cfav}</span>

                                            </div>
                                        </div>
                                })
                            }
                            
                        </div>
                        <div className="NavListDetailsTabSynt">
                        {this.state.navListDetailsXP.map((v) => {
                                        return <div className="DetailsTabSyntList" key={v.tradeItemId}>
                                            <div className="SyntListTop">
                                                <img src={v.img} className="SyntListTopimg" alt='' onClick={this.goTodetails}></img>
                                                <img src={indexSearch1} alt="" className="SyntListTopimg2"></img>
                                            </div>
                                            <p className="SyntListTit">
                                                {v.title}
                                            </p>
                                            <div className="SyntListBottom">
                                                <span className="SyntListBottomPic">¥{v.price}</span>
                                                <span className="SyntListBottomvolume">{v.cfav}</span>

                                            </div>
                                        </div>
                                })
                            }
                        </div>
                        <div className="NavListDetailsTabSynt">
                            <div className="NavListDetailsTabJG">
                                <div className="DetailsTabJGTop">
                                    <button className="DetailsTabJGTopBtn" onClick={this.mins}>50-80</button>
                                    <button className="DetailsTabJGTopBtn" onClick={this.mens}>80-90</button>
                                    <button className="DetailsTabJGTopBtn" onClick={this.maxs}>90-100</button>
                                </div>
                                <div className="DetailsTabJGBtoom">
                                    <span>区间（元）</span>
                                    <input type="text" className="DetailsTabJGBtoomInp" value={this.state.min} onChange={this.laier1}></input>
                                    -
                                    <input type="text" className="DetailsTabJGBtoomInp" value={this.state.max} onChange={this.laier2}></input>

                                    <button className="TabJGBtoomInpBtn" onClick={this.nise}>确认</button>
                                </div>

                            </div>

                        {this.state.navListDetailsJG.map((v) => {
                                        return <div className="DetailsTabSyntList" key={v.tradeItemId}>
                                            <div className="SyntListTop">
                                                <img src={v.img} className="SyntListTopimg" alt='' onClick={this.goTodetails}></img>
                                                <img src={indexSearch1} alt="" className="SyntListTopimg2"></img>
                                            </div>
                                            <p className="SyntListTit">
                                                {v.title}
                                            </p>
                                            <div className="SyntListBottom">
                                                <span className="SyntListBottomPic">¥{v.price}</span>
                                                <span className="SyntListBottomvolume">{v.cfav}</span>

                                            </div>
                                        </div>
                                })
                            }
                        </div>
                    </Tabs>
                </div>
                <div className="navListDetailsFlexd">
                    <div className={this.state.scrollTop>=300?"navListDetailsFlexdNav DetailsFlexdTop":"navListDetailsFlexdNav"}>
                        快捷<br></br>导航
                    </div>
                    <div className={this.state.scrollTop>=300?"navListDetailsFlexdTop navListDetailsFlexdOP":"navListDetailsFlexdTop"} onClick={this.goToTop}>
                        <p>↑</p>
                        <p>置顶</p>
                    </div>

                </div>
            </div>
        )
    }
}
export default withRouter(NavListDetails)
// 100028&iOS&1600693137217&NMMain@mgj_h5_1.0&52ad603c-57cd-4ca0-8918-d4b302780fbe&mwp.ferrari.searchActionLet&1&089f9cdb83e9b45e867839904daa8e0f&f2